<template>
  <div>
    <div>
      <span>当前的时间是：</span>
      <span>{{ currentTime }}</span>
    </div>
    <div>
      <el-button @click="openDialog">打开二次弹窗</el-button>
    </div>
    <div>
      <el-button @click="goToDownload">去下载</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { useTime } from "@/hooks/useTime";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";

let currentTime = ref<any>();
let timer: any = null;

const goToDownload = () => {
  useDownload();
};
/**
 * 创建定时器
 */
const ceatedSetInterval = () => {
  timer = setInterval(() => {
    const { nowTime } = useTime();
    currentTime.value = nowTime.value;
    console.log("每1秒执行一次", currentTime);
  }, 1000);
};
/**
 * 清除定时器
 */
const clearSetInterval = () => {
  timer && clearInterval(timer);
};
/**
 * 打开弹窗
 */
const openDialog = () => {
  useHandleData();
};

onMounted(() => {
  ceatedSetInterval();
});
onUnmounted(() => {
  clearSetInterval();
});
</script>

<style scoped lang="scss"></style>
